<style lang="less">
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}
// 内容部分
.content-wrapper {
  margin: 0px 10px 0px 0px;
  .card-request-item {
    margin: 0px 0px 10px 0px;
    .ivu-card-body {
      padding: 10px;
    }
    // 提问者
    .request-user {
      color: #808695;
      font-size: 12px;
    }
    // 问题标题
    .request-title {
      margin-top: 3px;
      margin-left: 5px;
      .title {
        font-size: 16px;
        font-family: "PingFang SC";
        font-weight: bold;
        color: #464c5b;
      }
      a:hover {
        color: #2b85e4;
      }
      // a:visited {
      //   color: #c5c8ce;
      // }
    }
    // 问题回复数量
    .request-answer-btn {
      text-align: right;
      color: #19be6b;
      font-size: 12px;
      margin-top: 10px;
    }
  }
}

// 侧边栏
.right-aside {
  width: 300px;
  position: fixed;
  // 分割线的外边距 上下 距离
  .ivu-divider-horizontal {
    margin: 10px 0;
  }
  .request-option-detail {
    // margin-top: 9px;
    .ivu-form-item-label {
      font-size: 15px;
    }
    // 表单元素上下距离
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }
  .request-option-button {
    margin-top: 9px;
    height: 29px;
  }
}

body {
  overflow: scroll;
}
</style>
<template>
  <div class="ora-web-index">
    <Row>
      <Col span="24">
        <div class="content-wrapper">
          <!-- 内容 -->
          <div v-for="request in allRequestList">
            <div class="room-request-content">
              <Col span="2">
                <div style="margin: 30px 6px;">
                  <Tag color="geekblue">{{request.userName}}</Tag>
                  <Tag color="purple">提问</Tag>
                </div>
              </Col>
              <Col span="22">
                <Card class="card-request-item">
                  <div class="request-user">
                    <span>&nbsp;&nbsp;{{request.createdAt}}</span>
                    <span
                      v-if="ownInfo.isOwnRoom === true && ownInfo.roleKey === 'teacher' && roomStatus === 1"
                      style="float:right; float: right; color: #ed4014;font-size: 18px;"
                    >
                      <Tooltip content="删除">
                        <Icon @click="deleteData(1,request.tid)" type="md-close"/>
                      </Tooltip>
                    </span>
                  </div>
                  <div class="request-title">
                    <span class="title">{{request.title}}</span>
                    <!-- <Divider></Divider> -->
                    <div style="background: rgb(238, 238, 238);padding: 20px; margin-top:10px">
                      <!-- <Card shadow> -->
                      <Reqeust-answer-content :content="request.content"/>
                      <!-- </Card> -->
                    </div>
                  </div>
                  <div
                    class="request-answer-btn"
                    v-if="(ownInfo.isOwnRoom === true && ownInfo.roleKey === 'teacher')
                    &&(!request.answerList || request.answerList.length ===0) && roomStatus === 1"
                  >
                    <Button type="success" @click="addAnswerBtn(request.tid)">回答</Button>
                  </div>
                </Card>
              </Col>
            </div>
            <div
              class="room-request-answer"
              style="margin-left: 18px;"
              v-if="request.answerList && request.answerList.length >0"
            >
              <Col span="2">
                <div style="margin: 30px 6px;">
                  <Tag color="geekblue">{{request.answerList[0].userName}}</Tag>
                  <Tag color="green">回答</Tag>
                </div>
              </Col>
              <Col span="22">
                <div style="background: #dcdee2;padding: 20px; margin: 0px 0px 23px 0px;">
                  <Card class="card-request-item">
                    <div class="request-user">
                      <span>&nbsp;&nbsp;{{request.createdAt}}</span>
                      <span
                        v-if="ownInfo.isOwnRoom === true && ownInfo.roleKey === 'teacher' && roomStatus === 1"
                        style="float:right; float: right; color: #ed4014;font-size: 18px;"
                      >
                        <Tooltip content="删除">
                          <Icon @click="deleteData(2,request.answerList[0].tid)" type="md-close"/>
                        </Tooltip>
                      </span>
                    </div>
                    <div class="request-title">
                      <!-- <Divider></Divider> -->
                      <!-- <Card shadow> -->
                      <Reqeust-answer-content :content="request.answerList[0].content"/>
                      <!-- </Card> -->
                    </div>
                  </Card>
                </div>
              </Col>
            </div>
          </div>
          <!-- 加载更多 -->
          <div>
            <Button long @click="loadMore">加载更多</Button>
          </div>
        </div>
      </Col>
      <Col>
        <!-- 回答模态框 -->
        <div class="room-answer-wrap">
          <Modal
            title="回答"
            :value="AnswerModalShow"
            :mask-closable="false"
            :closable="false"
            :draggable="true"
            :width="800"
          >
            <com-reply-form
              ref="RoomAnswerRef"
              :formObj="answerForm"
              @handleSubmit="handleSubmit"
              @room-answer-cancel="roomAnswerCancel"
            ></com-reply-form>
            <div slot="footer" v-if="true">
              <!-- <Button type="text" size="large" @click="updateRoomCancelBtn">取消</Button>
              <Button type="primary" size="large" @click="HandleUpdateRoomBtm">保存</Button>-->
            </div>
          </Modal>
        </div>
      </Col>
      <!-- 右边侧边栏 -->
      <!-- <Col span="5">
        <div class="right-aside">
          <div v-if="isLogin">
            <Card>
              <p slot="title">问题选项</p>
              <Form :model="conditionForm" label-position="top" ref="conditionForm">
                <div>
                  <div class="request-option-detail">
                    <FormItem label="问题状态">
                      <RadioGroup v-model="conditionForm.status">
                        <Radio label="0">全部</Radio>
                        <Radio label="1">未回答</Radio>
                        <Radio label="2">回答中</Radio>
                        <Radio label="3">已采纳</Radio>
                      </RadioGroup>
                    </FormItem>
                  </div>
                </div>
                <Divider/>
                <div style=" margin-top: 9px;">
                  <div class="request-option-detail">
                    <FormItem label="问题">
                      <Input v-model="conditionForm.title" placeholder="请输入要查找问题的关键字"></Input>
                    </FormItem>
                  </div>
                </div>
                <Collapse v-model="loadMoreValue">
                  <Panel name="1">
                    更多
                    <div slot="content">
                      <div>
                        <div class="request-option-detail">
                          <FormItem label="专题">
                            <Select
                              v-model="conditionForm.professionIds"
                              placeholder="请选择专业"
                              multiple
                              filterable
                            >
                              <Option
                                v-for="profession in professionList"
                                :value="profession.tid"
                              >{{profession.proName}}</Option>
                            </Select>
                          </FormItem>
                        </div>
                      </div>
                      <div>
                        <div class="request-option-detail">
                          <FormItem label="课程">
                            <Select
                              v-model="conditionForm.courseIds"
                              placeholder="请选择课程"
                              multiple
                              filterable
                            >
                              <Option
                                v-for="course in selectProCourseList"
                                :value="course.tid"
                              >{{course.courseName}}</Option>
                            </Select>
                          </FormItem>
                        </div>
                      </div>
                    </div>
                  </Panel>
                </Collapse>
              </Form>
              <div class="request-option-button">
                <Button type="info" style="float:right;" @click="search('conditionForm')">搜索</Button>
                <Button
                  style="float:right;margin-right: 6px;"
                  @click="handleReset('conditionForm')"
                >清空</Button>
              </div>
            </Card>
            <div style="margin-top:10px">
              <Button type="success" long @click="gotoRequest">新建提问</Button>
            </div>
          </div>
        </div>
      </Col>-->
    </Row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import ReqeustAnswerContent from '@/view/ora-web/request-answer/RequestAnswerContent.vue'
import ComReplyForm from './ComReplyForm.vue'

export default {
  components: {
    ComReplyForm,
    ReqeustAnswerContent
  },
  props: ['roomId', 'ownInfo', 'roomInfo'],
  data () {
    return {
      // 所有问题列表
      allRequestList: [],
      current: 1,
      size: 20,
      total: -1,
      // isLogin: false,
      conditionForm: {
        roomId: this.roomId
      },
      loadMoreValue: 0,

      answerForm: {}, // 封装回答信息的实体
      AnswerModalShow: false, // 回答模态框隐现
      deleteDataEntity: {}
    }
  },
  methods: {
    // 删除
    deleteData (type, tid) {
      const data = {
        type,
        tid
      }
      this.deleteDataEntity = data
      debugger
      this.$myTools.confirm(this, '删除', this.handleDelete)
    },
    // 处理删除操作
    handleDelete () {
      this.$httpUtil.asyncDelete(
        'web/raroom/request/delete',
        this.deleteDataEntity,
        res => {
          if (res.data.code === 200) {
            debugger
            this.$Message.success(res.data.msg)
            this.flushData()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 回答取消
    roomAnswerCancel () {
      this.AnswerModalShow = false
    },
    // 显示回答模态框
    addAnswerBtn (requestId) {
      this.answerForm.requestId = requestId
      this.AnswerModalShow = true
    },
    // 提交回答
    handleSubmit () {
      this.$httpUtil.asyncPost(
        'web/raroom/request/answer',
        this.answerForm,
        res => {
          if (res.data.code === 200) {
            this.$Message.success(res.data.msg)
            this.roomAnswerCancel()
            this.query()
            // 调用 子组件 清空回答内容
            this.$refs.RoomAnswerRef.handleReset()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 刷新界面  提问、回答成功时调用
    flushData () {
      this.current = 1
      this.size = 20
      this.total = -1
      this.loadMoreValue = 0
      this.query()
    },
    // 获取数据全部问题的数据
    query () {
      const data = {
        current: this.current,
        size: this.size,
        data: this.conditionForm
      }
      this.$httpUtil.asyncPost(
        'web/raroom/request/queryByCondition',
        data,
        res => {
          if (res.data.code === 200) {
            let pageRequestList = this.allRequestList
            if (this.current === 1) {
              // 首次是全部添加
              this.allRequestList = res.data.records
            } else {
              // 从第二次开始，都是叠加
              pageRequestList.push.apply(pageRequestList, res.data.records)
            }
            this.total = res.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 加载更多数据
    loadMore () {
      let tempCount = this.current * this.size
      if (this.total === -1) {
        // 首次加载
        this.current++
        this.query()
      } else {
        if (this.total > tempCount) {
          // 还有新的一页
          this.current++
          this.query()
        } else {
          // 再无新数据
          this.$Message.warning('数据已全部加载！')
        }
      }
    },

    // 跳转的提问页面
    gotoRequest () {
      this.$router.push({ name: 'request' })
    },

    // 获取下拉框列表
    getProfessionCourseData () {
      this.$httpUtil.asyncGet(
        'profession_course/profession/getAllProfessionCourse',
        {},
        res => {
          if (res.data.code === 200) {
            this.professionList = res.data.records.allProfession
            this.courseList = res.data.records.allCourse
            this.selectProCourseList = this.courseList
            this.professionCourseRelation = res.data.records.relation
          } else {
            this.$Message.success(res.data.msg)
          }
        }
      )
    },

    // 提交
    search (name) {
      this.query()
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields();
      (this.conditionForm = {
        status: '0'
      }),
      (this.selectProCourseList = this.courseList)
      this.query()
    },

    // 页面初始化方法
    init () {
      this.query()
    }
  },
  computed: {
    roomStatus () {
      return this.roomInfo.status
    }
  },
  watch: {},
  mounted () {
    this.init()
  }
}
</script>
